<template>
    <div>
        <div class="flex items-center justify-between p-4 pb-3 text-xs">
            <div class="flex items-center space-x-4 whitespace-nowrap relative grow w-0 overflow-hidden">
                <div class="px-2 py-px text-red-400 rounded-sm bg-red-50">新人立减 3 元</div>
                <div class="px-2 py-px text-red-400 rounded-sm bg-red-50">满 99 减 55 </div>
                <div class="px-2 py-px text-red-400 rounded-sm bg-red-50">换购</div>
                <div class="px-2 py-px text-red-400 rounded-sm bg-red-50">新人立减 3 元</div>
                <div class="px-2 py-px text-red-400 rounded-sm bg-red-50">满 99 减 55 </div>
                <div class="px-2 py-px text-red-400 rounded-sm bg-red-50">换购</div>
                <div class="absolute top-0 right-0 h-full w-24 bg-gradient-to-r to-white/90 from-transparent"></div>
            </div>
            <div class=" text-red-300 shrink-0 ml-2" @click="show">
                <IMingcute:right-fill />
            </div>
        </div>
        <Popup ref="popupRef">
            <div class="bg-white h-5/6 rounded-t-lg flex flex-col">
                <div class="p-3 text-center relative">
                    <span>优惠</span>
                    <div class="absolute right-4 top-3 w-5 h-5  text-gray-400">
                        <IRi:close-fill @click="close" />
                    </div>
                </div>
                <div class="grow overflow-y-auto text-sm px-4 space-y-4 pb-4">
                    <div>
                        <div class="text-gray-500">促销</div>
                        <div class=" space-y-4 mt-4 text-sm text-gray-500">
                            <div v-for="item in promotionals">
                                <div class="flex space-x-3">
                                    <div class="shrink-0">
                                        <div class=" bg-red-100 text-red-500 text-xs p-1 rounded-sm scale-75">{{ item.name
                                        }}</div>
                                    </div>
                                    <div class="grow">{{ item.description }}</div>
                                    <div class="shrink-0">
                                        <IMingcute:right-fill />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pt-4">
                        <div class="text-gray-500 ">
                            <span>优惠券</span>
                            <span class="text-xs text-gray-400 ml-2">(满足条件可用于当前商品)</span>
                        </div>
                        <div class="mt-4 space-y-4">
                            <div class="" v-for="(item, index) in coupons">
                                <div class="flex items-center h-24 rounded-lg overflow-hidden">
                                    <div
                                        class="w-28 h-full shrink-0 bg-red-300 text-white grid place-content-center text-center">
                                        <div>
                                            <div>
                                                <span class="text-sm">¥</span>
                                                <span class="text-3xl font-bold">{{ item.amount }}</span>
                                            </div>
                                            <div class="text-xs mt-2">
                                                满 {{ item.conditionAmount }} 元可用
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="h-full grow bg-gradient-to-r from-white to-red-100  flex flex-col text-xs text-gray-500">
                                        <div class="grow flex flex-col p-2">
                                            <div class="grow text-sm font-medium">{{ item.name }}</div>
                                            <div class="flex items-center justify-between">
                                                <div>{{ item.take_effect_at }} - {{ item.expire_at }}</div>
                                                <div
                                                    class="py-px px-2 scale-90 text-blue-300 border border-blue-300 rounded-full">
                                                    <span v-if="item.is_claim">可用商品</span>
                                                    <span v-else>立即领取</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div
                                            class="border-t   py-1 border-dashed border-gray-300 flex items-center justify-between mx-2">
                                            <div class=" space-x-2 flex items-center grow">
                                                <div class="">商品详情页领取</div>
                                                <div class="">可叠加</div>
                                            </div>
                                            <div class="shrink-0 bg-gray-50 rounded-full"
                                                @click="item.show_tag_detail = !item.show_tag_detail">
                                                <IMingcute:down-fill v-show="!item.show_tag_detail" />
                                                <IMingcute:up-fill v-show="item.show_tag_detail" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-gray-400 text-xs p-2 space-y-1 " v-show="item.show_tag_detail">
                                    <div class="">
                                        领取来源：商品详情页
                                    </div>
                                    <div class="">
                                        可叠加：可与现类xxx以及xxx券叠加
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Popup>
    </div>
</template>
    
<script setup lang='ts'>
const popupRef = ref();
const show = () => {
    popupRef.value?.open()
}
const close = () => {
    popupRef.value?.close()
}
const coupons = ref(new Array(4).fill(0).map(item => (
    {
        name: '618 补贴券',
        amount: '20',
        type: 'fullReduction',
        conditionAmount: '200',
        take_effect_at: '2023.06.03',
        expire_at: '2023.06.18',
        tags: [],
        allow_stacking: true,
        is_claim: Math.random() > 0.5,
        show_tag_detail: false
    }
)))
const promotionals = [
    {
        name: '满减',
        description: '99 元选购 5 件，每个商品最多购买 2 件'
    },
    {
        name: '换购',
        description: '购买一件可优惠换购热销商品'
    }, {
        name: '赠品',
        description: '全面时代湿巾手口专用清洁餐巾湿巾100%纯棉尝鲜装20片 * 一包(购买 2 件及以上，赠完即止) * 1'
    }
]
</script>
    
<style></style>